<template>
  <a-layout class="container">
    <a-layout-content class="layout-content">
      <div>
        <a-form ref="formRef" name="advanced_search" class="ant-advanced-search-form" :model="formState" @finish="onFinish">
          <a-row :gutter="24">
            <a-col :span="8">
              <a-form-item :name="formState.keywords" label="栏目名">
                <a-input v-model:value="formState.keywords" placeholder="关键词"></a-input>
              </a-form-item>
            </a-col>
          </a-row>
          <a-row>
            <a-col :span="8" offset="16" style="text-align: right">
              <a-button type="primary" html-type="submit">搜索</a-button>
              <a-button style="margin: 0 8px" @click="() => formState.resetFields()">重置</a-button>
            </a-col>
          </a-row>
        </a-form>
        <div class="search-result-list">
          <a-space style="margin-bottom: 20px">
            <a-button type="primary">新增栏目</a-button>
            <a-button type="default">批量删除</a-button>
          </a-space>
          <a-table :data-source="data" :columns="columns" :bordered="true" :filterMultiple="true" :row-selection="rowSelection" :row-key="record => record.key"
                   :pagination="pagination"
                   :loading="loading"
                   @change="handleTableChange"
          >
            <template #bodyCell="{column,record}">
              <template v-if="column.key === 'isShow' ">
                <a-switch :checked="record.isShow" checked-children="是" un-checked-children="否" @change="changeShow(record)"/>
              </template>
              <template v-if="column.key === 'edit'">
                <a-space>
                  <a-button>编辑</a-button>
                  <a-button danger @click="deleteConfirm(record)">删除</a-button>
                </a-space>
              </template>
            </template>
          </a-table>
        </div>
      </div>
    </a-layout-content>
  </a-layout>

</template>

<script>
import {reactive, ref, computed} from 'vue';
import {message, Modal} from 'ant-design-vue'

export default {
  name: "CategoryList",
  components: {},

  setup() {
    // 查询条件
    const formState = reactive({
      keywords: "",
      page: 1,
    });

    const loading = false
    const total = 500

    const pagination = computed(() => ({
      total: total,
      current: formState.page,
      pageSize: 20,
    }));

    // 查询
    const onFinish = values => {
      console.log('Received values of form: ', values);
      console.log('formState: ', formState);
    };

    // 数据
    const data = ref([
      {key: 1, categoryId: 1, categoryTitle: "golang", disabled: false, remark: "golang相关笔记", addTime: "2022-01-01 00:00:00", isShow: true, sort: 1},
      {key: 2, categoryId: 2, categoryTitle: "javascript", disabled: true, remark: "前端相关笔记", addTime: "2022-02-01 00:00:00", isShow: true, sort: 2},
      {key: 3, categoryId: 3, categoryTitle: "php", disabled: false, remark: "php相关笔记", addTime: "2022-03-01 00:00:00", isShow: true, sort: 3},
      {key: 4, categoryId: 4, categoryTitle: "其他", disabled: false, remark: "其他", addTime: "2022-04-01 00:00:00", isShow: true, sort: 4},
    ])

    // 表头
    const columns = [
      // 这里的 title 用于显示 dataIndex 用于绑定数据 key 用于在模板展示数据的时候查询
      {title: '序号', dataIndex: "categoryId", key: "categoryId"},
      {title: '名称', dataIndex: "categoryTitle", key: "categoryTitle"},
      {title: '备注', dataIndex: "remark", key: "remark"},
      {title: '排序值', dataIndex: "sort", key: "sort"},
      {title: '添加时间', dataIndex: "addTime"},
      {title: '是否显示', dataIndex: "", key: "isShow"},
      {title: '操作', dataIndex: "", key: "edit"}
    ]

    // 表格 - 行参数 多选
    const rowSelection = {
      // 用于选择 checkbox 返回数据
      onChange: (selectedRowKeys, selectedRows) => {
        console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
      },
      // 用于渲染页面禁用的 checkbox
      getCheckboxProps: record => ({
        disabled: record.disabled,
      }),
    }

    // 切换显示
    const changeShow = (record) => {
      record.isShow = !record.isShow
    }

    //删除确认
    const deleteConfirm = (record) => {
      console.log(record);
      Modal.confirm({
        title: "提示",
        content: "确认要删除 " + record.categoryTitle + " ,这条记录吗?",
        okText: "确认",
        cancelText: "取消",
        onOk() {
          message.error('尚未完成删除');
        },
        onCancel() {
        }
      })
    }
    const handleTableChange = (pag, filters, sorter) => {
      console.log(pag);
      console.log(filters);
      console.log(sorter);
    }

    return {
      formState, onFinish, data, columns, rowSelection, changeShow, deleteConfirm, total, pagination, loading, handleTableChange
    };
  },

};
</script>

<style scoped>

</style>